<template>
  <el-button type="primary" @click="AddRole">新增</el-button>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column fixed prop="roleName" label="角色名" />
    <el-table-column fixed="right" label="操作">
      <template v-slot="scope">
        <el-button link type="primary" size="small" @click="">删除</el-button>
        <el-button link type="primary" size="small" @click="Addrolepermission(scope.row)">设置权限</el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-dialog v-model="dialogFormVisible" title="新增角色" width="500">
    <el-form :model="form">
      <el-form-item label="角色名">
        <el-input v-model="form.roleName" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="AddRoleinfo()">确定</el-button>
      </div>
    </template>
  </el-dialog>

  <el-dialog v-model="dialogroleperimssonFormVisible" title="设置权限" width="500">
    <el-form :model="RPform">
      <el-form-item label="角色名">
        <el-input v-model="RPform.roleName" disabled />
      </el-form-item>
      <el-form-item label="权限">
        <el-checkbox-group v-model="RPform.permissionId">
          <el-checkbox v-for="city in RPform.permisson" :label="city.permissionName" :value="city.id">{{ city.permissionName }}</el-checkbox>
        </el-checkbox-group>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogroleperimssonFormVisible = false">取消</el-button>
        <el-button type="primary" @click="rolepermissioninsert()">确定</el-button>
      </div>
    </template>
  </el-dialog>

</template>
<script lang="ts" setup>
import { ref, reactive, onMounted } from "vue";
import { ElMessage } from "element-plus";
import { GetRole, Roleinfo,GetPermissions,RolePermissions } from "@/api/RBACMain/rbac";
const tableData = ref([])
onMounted(() => {
  GetRoleInfo();
})
//获取角色信息
const GetRoleInfo = () => {
  GetRole().then((res) => {
    tableData.value = res.data;
  })
}
const dialogFormVisible = ref(false)
const form = reactive({
  roleName: '',
})
const AddRole = () => {
  dialogFormVisible.value = true;
}
//////////新增角色/////////
const AddRoleinfo = () => {
  Roleinfo(form).then((res) => {
    if (res.code == 200) {
      ElMessage.success(res.msg)
      dialogFormVisible.value = false;
      GetRoleInfo();
    } else {
      ElMessage.error(res.msg)
    }
  })
}
//设置权限
const dialogroleperimssonFormVisible = ref(false)
const RPform = reactive({
  roleId: '',
  roleName: '',
  permissionId: [],
  permisson: []
})

const Addrolepermission = (row: any) => {
  dialogroleperimssonFormVisible.value = true;
  RPform.roleName = row.roleName;
  RPform.roleId = row.id;
  console.log(row);
  GetRolePermissions()
}
const GetRolePermissions=()=>{
  GetPermissions().then((res) => {
    RPform.permisson = res.data;
  })
}
///添加权限
const rolepermissioninsert=()=>{
  RolePermissions(RPform).then((res) => {
    if (res.code == 200) {
      ElMessage.success("添加成功")
      dialogroleperimssonFormVisible.value = false;
    } else {
      ElMessage.error("添加失败")
    }
  })
}
</script>